<!-- 废弃，使用子组件组合转到PostFormComponent -->

<style scoped>
.post-form{
    margin: 50px auto;
    padding: 30px;
}
.alert{
    margin-top: 10px;
}
</style>

<!-- <template>
    <div class="card col-8 post-form">
        <h3 class="text-center">发布新文章</h3>
        <hr>
        <form @submit.prevent="store">
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" ref="title" class="form-control" id="title" v-model="article.title">
                <div class="alert alert-danger" role="alert" v-show="errors.title">
                    {{ errors.author }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">作者</label>
                <input type="text" ref="author" class="form-control" id="author" v-model="article.author">
                <div class="alert alert-danger" role="alert" v-show="errors.author">
                    {{ errors.author }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">内容</label>
                <textarea type="form-control" rows="5" ref="content" class="form-control" id="content" v-model="article.content"></textarea>
                <div class="alert alert-danger" role="alert" v-show="errors.content">
                    {{ errors.content }}
                </div>
            </div>
            <button type="submit" class="btn btn-primary">立即发布</button>
            <div class="alert alert-success" role="alert" v-show="published">
                文章发布成功
            </div>
        </form>
    </div>
</template>

<script>
import axios from 'axios';
export default{
    data() {
        return {
            article: {
                title: "",
                author: "",
                content: ""
            },
            errors: {
                title:"",
                author:"",
                content: "",
            },
            published:false
        }
    },
    methods:{
        store() {
            //先清理错误消息
            Object.entries(this.errors).forEach(error => {
                let[key,msg]=error;
                this.errors[key] = "";
            });
            axios.post("/post",this.article).then(response=>{
                //请求成功
                this.published =true;
                console.log(response.data);
            }).catch( error => {
                //请求失败
                //获得验证错误包
                let errorBag = error.response.data;
                console.log(errorBag);
                //错误包中每个字段的错误信息可能有多个
                Object.entries(errorBag.errors).forEach(bag=>{
                    let [field, errors] = bag;
                    if(errors.length > 0){
                        this.errors[field] = errors.join('<br>');
                    }
                })
                console.log(this.errors);
            })
        }
    }
}
</script> -->


<!-- 基于Errors 类重构表单组件 -->
<!-- <template>
    <div class="card col-8 post-form">
        <h3 class="text-center">发布新文章</h3>
        <hr>
        <form @submit.prevent="store" @keyup="errors.clear($event.target.name)">
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" ref="title" class="form-control" id="title" v-model="article.title">
                <div class="alert alert-danger" role="alert" v-show="errors.get('title')">
                    {{ errors.get('title') }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">作者</label>
                <input type="text" ref="author" class="form-control" id="author" v-model="article.author">
                <div class="alert alert-danger" role="alert" v-show="errors.get('author')">
                    {{ errors.get('author') }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">内容</label>
                <textarea type="form-control" rows="5" ref="content" class="form-control" id="content" v-model="article.content"></textarea>
                <div class="alert alert-danger" role="alert" v-show="errors.get('content')">
                    {{ errors.get('content') }}
                </div>
            </div>
            <button type="submit" class="btn btn-primary">立即发布</button>
            <div class="alert alert-success" role="alert" v-show="published">
                文章发布成功
            </div>
        </form>
    </div>
</template>

<script>
import axios from 'axios';
export default{
    data() {
        return {
            article: {
                title: "",
                author: "",
                content: ""
            },
            errors: new Errors(),
            published:false
        }
    },
    methods:{
        store() {
            axios.post("/post",this.article).then(response=>{
                //请求成功
                this.published =true;
                console.log(response.data);
            }).catch( error => {
                //请求失败
                //获得验证错误包
                this.errors.set(error.response.data.errors);
                console.log(this.errors);
            })
        }
    }
}
</script> -->

<!-- 通过Form类重构表单组件 -->
<template>
    <div class="card col-8 post-form">
        <h3 class="text-center">发布新文章</h3>
        <hr>
        <form @submit.prevent="store" @keyup="errors.clear($event.target.name)">
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" ref="title" class="form-control" id="title" v-model="form.title">
                <div class="alert alert-danger" role="alert" v-show="form.errors.get('title')">
                    {{ form.errors.get('title') }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">作者</label>
                <input type="text" ref="author" class="form-control" id="author" v-model="form.author">
                <div class="alert alert-danger" role="alert" v-show="form.errors.get('author')">
                    {{ form.errors.get('author') }}
                </div>
            </div>
            <div class="form-group">
                <label for="title">内容</label>
                <textarea type="form-control" rows="5" ref="content" class="form-control" id="content" v-model="form.content"></textarea>
                <div class="alert alert-danger" role="alert" v-show="form.errors.get('content')">
                    {{ form.errors.get('content') }}
                </div>
            </div>
            <button type="submit" class="btn btn-primary">立即发布</button>
            <div class="alert alert-success" role="alert" v-show="form.success">
                文章发布成功
            </div>
        </form>
    </div>
</template>

<script>
export default{
    props: ['username'],

    data() {
        return {
            form: new Form({
                title: '',
                author: '匿名用户',
                content: ''
            })
        }
    },

    mounted(){
        let timer = setInterval(()=> {
            if(this.$user) {
                this.form.author = this.$user.get('name');
                clearInterval(timer);
            }
        },1000)
    },

    methods:{
        store() {
            this.form.post('/post')
                .then(data => console.log(data)) // 自定义表单提交成功处理逻辑
                .catch(data => console.log(data)) // 自定义表单提交失败处理逻辑
        }
    }
}
</script>
